<template>
	<div class="extension">
		<div class="top-top">
			<Head />
			<img src="../assets/img/683.png" alt="" class="top-img" />
		</div>
		<!-- 外层盒子 -->
		<div class="main-wai">
			
			<div class="main">
				
				<div>
					<div class="mian-one">
						<p class="jux"></p>
						<span>推广收益</span>
					</div>
					<!-- <span v-text="this.list.Time"></span> -->
					<span class="tui-time" v-text="this.list.Time"></span>
				</div>
				<div style="padding-left: 0.625rem;">
					<span>拉新赚取</span>
					<span> 拉取一个玩家注册获得{{list.TgUserCash}}元</span>
				</div>
				<table class="table1">
					<tr>
						<td>拉新人数</td>
						<td v-text="this.list.MonthTgUserNumber"></td>
					</tr>
					<tr>
						<td>累计金额</td>
						<td >{{this.list.MonthTgUserCash}}元</td>
					</tr>
				</table>
				<p class="main-p1">下级彩币提成</p>
				<table class="table2 table1">
					<tr>
						<td>充值人数</td>
						<td v-text="this.list.ChildrenRechargeUserNumber"></td>
					</tr>
					<tr>
						<td>充值彩币</td>
						<td >{{this.list.ChildrenRechargeCbNumber}}彩币</td>
					</tr>
					<tr>
						<td>分成比例</td>
						<td>
							<span style="margin-left: 25%;">{{this.list.ChildrenRechargeCbProportion}}</span>
							<span class="det" @click="bl">查看详情</span>
						</td>

					</tr>
					<tr>
						<td>累计提成</td>
						<td >{{this.list.ChildrenRechargeCbCash}}元</td>
					</tr>
				</table>
				<p class="main-p2">下级积分提成</p>
				<table class="table2 table1">
					<tr>
						<td>下级人数</td>
						<td v-text="this.list.ChildrenEarnJfUserNumber"></td>
					</tr>
					<tr>
						<td>赚取总积分</td>
						<td v-text="this.list.ChildrenEarnSumJf" >积分</td>
					</tr>
					<tr>
						<td>分成比例</td>
						<td>
							<span style="margin-left: 25%;">{{this.list.ChildrenEarnJfProportion}}</span>
							<span class="det" @click="Twodes">查看详情</span>
						</td>
					</tr>
					<tr>
						<td>累计提成</td>
						<td>{{this.list.ChildrenEarnJfCash}}元</td>
					</tr>
				</table>
			</div>
			<!-- 合计降收益-->
			<div class="heji">
				<div class="syxq">
					<div class="caibi">
						<span>合计收益：</span>
						<span class="caibi-shuju money" >{{this.list.TotalCash}}元</span>
					</div>
					<div class="box">合计总收益</div>
					<!-- 申请提现按钮 -->
				</div>
				<div class="sqtx" @click="open">申请提现</div>
			</div>
		</div>
		<!-- 假盒子 -->
		<div class="jia-box"></div>
		<div class="footer">
			<router-link class="zy" to="/index">
				<img src="../assets/img/246062.png" alt="" />
				<p>主页</p>
			</router-link>
			<router-link class="sy" to="/profit">
				<img src="../assets/img/24607.png" alt="" />
				<p>收益</p>
			</router-link>
			<router-link class="tg" to="/extension">
				<img src="../assets/img/246082.png" alt="" />
				<p>推广</p>
			</router-link>
		</div>
		<!-- 模态框 -->
		<div class="motai" @click="sssp">		
			<div>
				<div @click="ssrr">X</div>
				<div>
					<p>{{ this.list.ChildrenRechargeCbExplain}}</p>
				</div>
			</div>
		</div>
		<!-- 模态框 -->
		<div class="motais motai" @click="ssp">		
			<div>
				<div @click="srr">X</div>
				<div>
					<p>{{ this.list.ChildrenEarnJfExplain}}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Head from "../components/Head.vue";
	import {PromotionIncome} from "@/api/profit.js"
	import {getUser} from "@/api/index.js"
	export default {
		components: {
			Head,
		},
		data() {
			return {
				list: {},
				bili:[],
				xiangqing: {},

			};
		},
		methods: {
			open() {
				this.$confirm('每月月初系统自动打款，请及时完善你的银行信息，否则上月收益清零', {
					confirmButtonText: '我知道了',
					showCancelButton: false,
					// type: 'warning',
					center: true
				}).then(() => {
					this.$message({
						type: 'success',
						message: 'ok!'
					});
				})
			},
			Twodes(){
				document.querySelector(".motais").style.visibility = "visible";
			},
			ssp(){
				document.querySelector(".motais").style.visibility = "hidden";
			},
			srr() {
				document.querySelector(".motais").style.visibility = "hidden";
			},
			// 模态框
			sssp() {
				document.querySelector(".motai").style.visibility = "hidden";
			},
			// 确认按钮
			ssrr() {
				document.querySelector(".motai").style.visibility = "hidden";
			},
			bl() {
				document.querySelector(".motai").style.visibility = "visible";
			},

			srr() {
				// 推广收益
				PromotionIncome().then(res =>{
					console.log(res,'12121212');
					if(res.Code == 200){
						this.list = res.Data;
					}
					
				})
			},
			
		},
		mounted() {
			// 信息
			getUser().then(res =>{
				// console.log(res,'2222222');
				let Data = res.Data
				if(res.Code == 200 ){
					if (Data.SfZj != 1) {
						
					}
				}else{
					console.log(res.Message);
				}
			})

		},
		async created() {
			await this.srr();
			await this.ssrr();
		},
	};
</script>
<style>
	.el-message-box__header {
	    position: relative;
	    /* padding: 15px 15px 10px; */
	}
	.el-button > span{
		color: #374EF2;
	}
	.el-button{
		font-size: 16px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		/* line-height: 27px; */
		color: #374EF2;
		outline: none !important;
		background-color: transparent !important;
		border: none !important;
	}

	.el-message-box__btns {
		border-top: 0.0625rem solid #EEEEEF;
	}

	.el-message-box__wrapper .el-message-box {
		display: inline-block;
		width: 307px;
		padding-bottom: 0px;
		vertical-align: middle;
		background-color: #FFF;
		border-radius: 4px;
		border: 1px solid #EBEEF5;
		font-size: 18px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		text-align: left;
		overflow: hidden;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
</style>
<style lang="less" scoped>
	.motais>div>div:nth-child(2) {
		font-size: 0.9rem;
		color: #333333;
	}
	
	.motais>div>div:first-child {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
	
	.motais>div {
		width: 90%;
		background-color: #fff;
		border-radius: 5px;
		padding: 1% 2%;
		box-sizing: border-box;
	}
	
	.motais{
		width: 100%;
		height: 100%;
		background-color: rgba(51, 51, 51, 0.7);
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		display: flex;
		visibility: hidden;
		justify-content: center;
		align-items: center;
	}
	.motai>div>div:nth-child(2) {
		font-size: 0.9rem;
		color: #333333;
	}
	
	.motai>div>div:first-child {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
	
	.motai>div {
		width: 90%;
		background-color: #fff;
		border-radius: 5px;
		padding: 1% 2%;
		box-sizing: border-box;
	}
	
	.motai {
		width: 100%;
		height: 100%;
		background-color: rgba(51, 51, 51, 0.7);
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		display: flex;
		visibility: hidden;
		justify-content: center;
		align-items: center;
	}
	.mian-one{
		display: flex;
		align-items: center;
	}
	.tui-time{
		font-size: 0.875rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		// line-height: 24px;
		color: #333333;
	}
	.jux{
		width: 0.25rem;
		height: 1.4375rem;
		background: #374EF2;
		opacity: 1;
		border-radius: 0px 8px 10px 0px;
		margin-right: 0.625rem;
	}
	.det {
		font-size: 0.75rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		// line-height: 20px;
		color: #374EF2;
		float: right;
		margin-right: 15px;
	}

	.heji {
		padding: 31px 10px;
		background: rgb(255, 255, 255);
		margin-top: 10px;
		border-radius: 0.2125rem;
	}

	.money {
		font-size: 1rem;
		font-family: Source Han Sans CN;
		font-weight: bold;
		// line-height: 27px;
		color: #E5522A;
	}

	.caibi {
		// width: 85%;
		margin: 0 auto;
		display: flex;
		justify-content: flex-end;
		font-size: 0.9rem;
		font-weight: 500;
		color: #333333;
	}

	.syxq-shuju {
		color: #333333;
		font-weight: 400;
	}

	.box {
		width: 4.125rem;
		height: 1.375rem;
		background: linear-gradient(90deg, #ff8a00 0%, #ff4700 100%);
		border-radius: 0.125rem;
		position: absolute;
		top: -0.65rem;
		left: 0.625rem;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0.8rem;
		font-weight: 500;
		color: #ffffff;
	}

	.syxq>div:first-child {
		width: 85%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		margin-bottom: 0.875rem;
		font-size: 0.9rem;
		font-weight: 400;
		color: #585858;
	}

	.syxq {
		width: 95%;
		background: #f7f7f7;
		border-radius: 0.25rem;
		margin: 0 auto;
		position: relative;
		padding-top: 1.43rem;
		padding-bottom: 0.68rem;
		box-sizing: border-box;
		margin-bottom: 1.125rem;
	}



	.sqtx {
		width: 80%;
		height: 2.8125rem;
		background: #374ef2 !important;
		border-radius: 1.5625rem;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		font-size: 1rem !important;
		font-weight: 400 !important;
		color: #ffffff !important;
		text-decoration: none;
		margin: 0 auto;
	}

	.jia-box {
		height: 10%;
		width: 100%;
	}

	.main-p4,
	.main-p3 {
		font-size: 0.8rem;
		font-weight: 400;
		color: #585858;
	}

	.main-p3 {
		margin-bottom: 0.625rem;
	}

	.main-p2 {
		margin-bottom: 0.875rem;
		font-size: 0.9rem;
		font-weight: 500;
		color: #333333;
	}

	.table2 {
		height: 7.5rem;
	}

	.main-p1 {
		margin-bottom: 0.875rem;
		font-size: 0.9rem;
		font-weight: 400;
		color: #333333;
	}

	table {
		width: 100%;
		height: 3.8125rem;
		border-spacing: 0;
		/*去掉单元格间隙*/
		border: 1px solid #aab4ff;
		border-radius: 0.25rem;
		margin-bottom: 1rem;
	}

	tr:nth-child(2n) {
		background: #e7eaff;
	}

	tr {
		border-radius: 0rem 0rem 0.25rem 0.25rem;
	}

	tr>td:first-child {
		width: 6.375rem;
	}

	td {
		text-align: center;
	}

	.table1>tr>td:nth-child(1) {
		// border-bottom: 1px solid #aab4ff;
		font-size: 0.75rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		// line-height: 20px;
		color: #585858;
	}

	.table1>tr>td:nth-child(2),
	.table2>tr>td:nth-child(2) {
		border-left: 1px solid #aab4ff;
	}

	.main-wai {
		width: 100%;
		// height: 35.5rem;
		padding-left: 0.625rem;
		padding-right: 0.625rem;
		box-sizing: border-box;
	}

	.main>div:first-child {
		margin-bottom: 1rem;
	}

	.main>div:nth-child(2) {
		margin-bottom: 0.8125rem;
		font-size: 0.875rem;
		font-family: Source Han Sans CN;
		font-weight: 500;

		color: #333333;
	}

	.main>div {
		
		font-size: 1.125rem;
		font-family: Source Han Sans CN;
		font-weight: 500;
		// line-height: 31px;
		color: #5F5F61;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: -0.625rem;
	}

	.main>div:nth-child(2)>span:nth-child(2) {
		font-size: 0.7rem;
		font-weight: 400;
		color: #8e8e93;
	}

	.main {
		width: 100%;
		height: 100%;
		background: #ffffff;
		border-radius: 0.25rem;
		padding-left: 0.625rem;
		padding-right: 0.625rem;
		padding-bottom: 1rem;
		padding-top: 1rem;
		box-sizing: border-box;
	}

	.top-top>img {
		width: 100%;
	}

	.top-top {
		width: 100%;
		// height: 13.125rem;
		background: radial-gradient(circle, #fb9d1a 0%, #ffbf67 100%);
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
		padding-left: 0.9rem;
		padding-right: 0.9rem;
		padding-top: 0.9rem;
		box-sizing: border-box;
		margin-bottom: 0.5rem;
		
	}

	.extension {
		width: 100%;
		height: 100%;
	}

	.top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 3%;
	}

	.top>img {
		width: 9%;
		height: 100%;
	}

	.top>span {
		font-size: 1.3rem;
		font-weight: bold;
		color: #333333;
	}

	.profit {
		width: 100%;
		height: 100%;
		padding-left: 3%;
		padding-right: 3%;
		padding-top: 3%;
		background: #f7f7f7;
		box-sizing: border-box;
	}

	.tg>p {
		color: #374ef2 !important;
	}

	.zy,
	.tg,
	.sy {
		width: 10%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-decoration: none;
	}

	.footer img {
		width: 1.375rem;
		height: 1.375rem;
	}

	.footer p {
		font-size: 0.5rem;
		color: #707070;
	}

	.footer {
		width: 100%;
		height: 7%;
		position: fixed;
		background-color: #fff;
		bottom: 0;
		left: 0;
		z-index: 2;
		display: flex;
		justify-content: space-evenly;
	}
</style>
